<html>
<head>
<style>
label {width:90px; display:inline-block;}
div {padding:10px 0; margin:10px 0; border-bottom:1px dashed #ddd}
#options label{display:inline; margin: 0 20px;}
.num{width:50px;}
#advanced_options
{
  background: none repeat scroll 0 0 #EEEEEE;
    margin-bottom: -10px;
    overflow: auto;
    position: relative;
    text-align: right;
    z-index: 3;
}
#options
{
background: none repeat scroll 0 0 #FEFEFE;
    border-bottom: 0 none;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 0 5px #555555;
    float: right;
    padding: 10px;
    display:none;
}

.left{float:left}
.right{float:right}
</style>
<script src="js/mylibs/jquery.min.js"></script>
<script src="js/mylibs/jquery-ui-1.8.16.custom.min.js"></script>
<script>
$(function(){
        $('#advanced_options a').click(function(){
                $('#options').slideToggle(400);
        });
        
        $('input[type=submit]').click(function(){
                window.location = "results.html"
        });
        var availableTags = [
		"ActionScript",
		"AppleScript",
		"Asp",
		"BASIC",
		"C",
		"C++",
		"Clojure",
		"COBOL",
		"ColdFusion",
		"Erlang",
		"Fortran",
		"Groovy",
		"Haskell",
		"Java",
		"JavaScript",
		"Lisp",
		"Perl",
		"PHP",
		"Python",
		"Ruby",
		"Scala",
		"Scheme"
	];
	$( "input" ).autocomplete({
		source: availableTags
	});

})
</script>
</head>
<body>
<h2>Find Route</h2>

<form>
	<div>
		<label for="origin">From</label>
		<input name="origin" type="text" />
		<label for="originA">  Area</label>
		<input name="originA" type="text" />
	</div>
        <div>
                <label for="destination">To</label>
                <input name="destination" type="text" />
                 <label for="destinationA">  Area</label>
                <input name="destinationA" type="text" />
        </div>
	<div id="advanced_options">
		<input type="submit" value="Search" class="left"/>
		<a href="#" class="right">Advanced Options</a>
	</div>
	<div id="options">
		<div>
			<input class="num" type="text"/>
			&lt;&lt;
			<label>Cost</label>
			&lt;&lt;
			<input class="num" type="text"/>
		</div>
		<div>
			<label>Type</label>	
			<select>
				<option>---</option>
				<option>Metro</option>
				<option>Bus</option>
				<option>Taxi</option>
			</select>
		</div>
		<div>
		        <label>Avg Duration</label>
			<select>
				<option>---</option>
				<option>&lt; 15 mins</option>
				<option>&lt; 30 mins</option>
				<option>&lt; 1 hour</option>
			</select>
		</div>
	</div>
</form>
</body>
</html>
